<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 头部轮播图  -->
    <header id="header">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../imgs/swiper1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../imgs/swiper2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../imgs/swiper3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </header>
    <!-- 身体 -->
    <main id="main">
        <!-- 版心 -->
        <div class="container1">
            <!-- 排名和打卡 -->
            <div class="rankBox mt20">
                <!-- 排名 -->
                <div class="rank">
                    <div class="rankOne iconfont icon-jiangbei"></div>
                    <p class="rankTwo">今日排民</p>
                    <p class="rankThree"></p>
                </div>
                <!-- 打卡 -->
                <div class="clock">
                    <div class="clockOne iconfont icon-daka"></div>
                    <p class="clockTwo">累积打卡<span class="numOne"></span>天</p>
                    <p class="clockThree">今日打卡</p>
                </div>
            </div>
            <!-- 运动数据和勋章 -->
            <div class="sports mt20">
                <!-- 运动数据 -->
                <div class="runData">
                    <p>运动数据</p>
                </div>
                <!-- 勋章 -->
                <div class="medal">
                    <div class="medalOne iconfont icon-xunzhang"></div>
                    <p class="medalTwo">累计运动徽章</p>
                    <p class="medalThree"><span class="numTwo"></span><span class="mei">枚</span></p>
                </div>
            </div>
            <!-- 课程训练  -->
            <div class="train mt20">
                <p>课程训练</p>
            </div>
            <!-- 户外跑步 -->
            <div class="outRun mt20">
                <p>户外跑步</p>
            </div>
        </div>
        <div class="box">
            <div class="iconfont icon-gou"></div>
            <p class="boxP"></p>
        </div>
        <div class="box1">
            <div class="iconfont icon-point"></div>
            <p class="boxP1"></p>
        </div>
    </main>
</body>

</html>